<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>

<!DOCTYPE HTML>

<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Library</title>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<link href="${contextPath}/view/css/library/board.css" rel="stylesheet">
<script src="${contextPath}/view/js/jquery-1.11.1.min.js"></script>
</head>
<body>
	<div id="wrapper">
		<div id="wrappertop">
			<table>
				<tr>
					<td>
						<button id="addBoard">+</button>
						<select id="selectBoard">
							<c:forEach var="model4Board" items="${model4Library.model4Boards}">
								<option <c:if test="${model4Board.name eq board_name}">selected</c:if>>${model4Board.name}</option>
							</c:forEach>
						</select>
					</td>
					<td>
						BOOKSOTONG
					</td>
					<td>
						${name}
					</td>
				</tr>
			</table>
		</div>
		<div id="wrappermiddle">
			<table>
				<tr>
					<td id="wrapperbook" style="display: none;">
					</td>
					<c:forEach var="model4Board" items="${model4Library.model4Boards}">
						<c:if test="${model4Board.name eq board_name}">
							<c:forEach var="model4List" items="${model4Board.model4Lists}">
								<c:if test="${!empty model4List}">
									<td>
										<div class="wrapperlist">
											${model4List.name}<br/>
											<c:forEach var="model4Card" items="${model4List.model4Cards}">
												<c:set var="model4Book" value="${model4Card.model4Book}"/>
												<c:if test="${!empty model4Book}">
													<div class="wrappercard" style="background-color: rgb(255, 255, 255);" data-index="${card.model4Book.num}">
														${model4Book.title}<br/>
														<img src="${contextPath}${model4Book.image}"><br/>
														${model4Book.lastComment}<br/>
													</div>
												</c:if>
											</c:forEach>
										</div>
									</td>
								</c:if>
							</c:forEach>
						</c:if>
					</c:forEach>
					<td>
						<button id="addList">addList</button>
					</td>
				</tr>
			</table>
		</div>
	</div>

	<script>
		$(document).ready(function() {
			$('.wrappercard').click(function() {
				var book_num = $(this).data("index");
				$.ajax({
					url : 'book.action',
					type : 'POST',
					data : {
						book_num : book_num
					},
					dataType : 'html',
					success : function(html) {
						$('#wrapperbook').html(html);
						$('#wrapperbook').show();
					},
					error : function(xhr, ajaxOptions, thrownError) {
						alert('An error occurred! ' + thrownError);
					},
				});
			});
		});
	</script>
</body>
</html>